<template>
    <div class="login-box">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <h3>后台管理系统</h3>
                </div>
            </template>
            <!--1.定义 表单组件 -->
            <el-form :model="loginForm" size="large" :rules="rules" label-width="auto">
                <!-- 账户 -->
                <el-form-item label="账户" prop="adminname">
                    <el-input v-model="loginForm.adminname" />
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input type="password" autocomplete="off" v-model="loginForm.password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="code">登录</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>

<script>
import {getLoginAPI} from '@/api/account.js'
    export default {
        data(){
            return{
                loginForm:{
                    adminname:'',
                    password:''
                },
                rules:{
                    adminname: { required: true, message: "账号不能为空", trigger: "blur" },
                    password: { required: true, message: "密码不能为空", trigger: "blur" },
                }
            }
        },
        methods:{
            code(){
                getLoginAPI({
                    adminname:this.loginForm.adminname,
                    password:this.loginForm.password
                }).then(res=>{
                    
                    if(res.data.code == 200){
                        // 将账号和token存储起来
                        localStorage.setItem('token',res.data.data.token)
                        // 把数据也存储起来
                        localStorage.setItem('login',JSON.stringify(res.data.data))
                        // 登录成功跳转到首页
                        this.$router.push('/')
                    }
                })

            }
        }
    }
</script>

<style  scoped lang="less">

.login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url("https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689181200&t=64997311b381ed2a8ad60c158292949f");
    background-repeat: no-repeat;
    background-size: cover;
}

.card-header {
    text-align: center;
}

.box-card {
    width: 400px;
}

.el-button {
    width: 100%;
    background-color: #1677ff;
}
</style>